<template>
  <!-- 这是积分兑换订单详情 -->
  <div id="EODetails">
    <div class="content">
      <div class="orderTitle">
        <h2>订单详情</h2>
        <div class="orderText">
          <!-- 订单号：{{orderNum}} -->
          订单号：111111111111111

          <!-- <div class="buttonGroup">
            <button>订单状态：{{tableList.status}}/是否为申请状态：{{tableList.wares[0].refundid}}/进度退款id：{{query.id}}/售后时间：{{endRefund}}</button>

            <button @click="cancelOrder('cancel')" :disabled='disabled' v-if="(((tableList.status == 0) && (tableList.wares[0].refundid == 0)) ? true : false)">取消订单</button>
            <button @click="evaluate('evaluate')" :disabled='disabled' v-if="(((tableList.status == 3) && (tableList.wares[0].refundid == 0)) ? true : false)">评价</button>
            <button @click="applyRefund(tableList.status)" :disabled='disabled' v-if="(((tableList.status == 1 || tableList.status == 2 || tableList.status == 3) && (tableList.wares[0].refundid == 0) && endRefund) ? true : false)">申请退款</button>
            <button @click="confirm('receiving')" :disabled='disabled' v-if="(((tableList.status == 2) && (tableList.wares[0].refundid == 0)) ? true : false)">确认收货</button>
            <button @click="deleteOrder('delete')" :disabled='disabled' v-if="((tableList.status == -1 || tableList.status == 3) ? true : false)">删除订单</button>
            <button @click="payment()" :disabled='disabled' class="payment_button" v-if="(((tableList.status == 0) && (tableList.wares[0].refundid == 0)) ? true : false)">立即支付</button>
            <button @click="viewProgress" v-if="(((query.id != '' && query.id != 0 && tableList.wares[0].refundid == query.id) && tableList.status != -1) ? true : false)">查看进度</button>
            <button @click="cancel" v-if="(((query.id != '' && query.id != 0 && tableList.wares[0].refundid == query.id) && tableList.status != -1) ? true : false)">取消申请</button>
          </div> -->
        </div>
      </div>
      <div class="orderStatus">
        <!-- 订单状态，待发货或者已完成 -->
        <h4>待发货</h4>
        <!-- <h4 class="businessText" v-if="(refund_status == -1) && (query.reply != '')">拒绝原因：{{query.reply}}</h4> -->
        <table class="ul_li_table">
          <tr>
            <td>
              <div class="detail_Img"><router-link :to="{path:'/goodsDetail', query:{id: 1}}"><img src="../../../public/img/coffe.jpg" alt=""></router-link></div>
            </td>
            <td>
              <div class="detail_Text"><router-link :to="{path:'/goodsDetail', query:{id: 1}}">商品标题1111111</router-link></div>
            </td>
            <td>
              <div class="danjiaNum"><i>1000 积分</i> <span>+ 1.5 元</span> × 2</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="receivingInformation">
        <h4>收货信息</h4>
        <table>
          <tr>
            <td>姓  名：</td>
            <td>测试人员A</td>
          </tr>
          <tr>
            <td>联系电话：</td>
            <td>130000000000</td>
          </tr>
          <tr>
            <td>收货地址：</td>
            <td>广东省 广州市 番禺区 A街道BC号</td>
          </tr>
        </table>
      </div>
      <!-- <div class="paymentMethod">
        <h4>支付方式</h4>
        <p><span>支付方式：</span> 积分兑换</p>
      </div> -->
      <!-- <div class="invoiceInformation">
        <h4>发票信息</h4>
        <table>
          <tr>
            <td>发票类型：</td>
            <td>{{tableList.invoiceType}}发票</td>
          </tr>
          <tr>
            <td>发票内容：</td>
            <td>购买商品明细</td>
          </tr>
          <tr>
            <td>抬头类型：</td>
            <td>{{tableList.invoiceTitle}}</td>
          </tr>
          <tr>
            <td>发票抬头：</td>
            <td>{{tableList.invoiceText}}</td>
          </tr>
          <tr>
            <td>纳税人识别号：</td>
            <td>{{tableList.taxNumber}}</td>
          </tr>
        </table>
      </div> -->
      <!-- <div class="remarks">
        <h4>备注</h4>
        <p>1111111</p>
      </div> -->
      <div class="orderAmount">
        <div class="floatR">
          <table>
            <tr>
              <td>商品总价：</td>
              <td>
                <div class="integral">
                  <i>120</i> 积分 <i>+ </i>
                </div>
                <div class="integral">
                  <i> 1.5</i> 元
                </div>
              </td>
            </tr>
            <tr>
              <td>运费：</td>
              <td>0 元</td>
            </tr>
            <tr>
              <td>应付金额：</td>
              <td>
                <div class="integral">
                  <span>1.5</span> 积分 <span>+ </span>
                </div>
                <div class="integral">
                  <span> 1.5</span> 元
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 原数组
      goodsList: [
        {goods_id: 0, id: 3, title: '积分商品标题测试11，花草绿植', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 1.5, integral: 100},
        {goods_id: 1, id: 2, title: '积分商品标题测试22，居家日用', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 0, integral: 1010},
        {goods_id: 2, id: 1, title: '积分商品标题测试33，生活服务', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 1.2, integral: 560},
        {goods_id: 3, id: 4, title: '积分商品标题测试44，生活电器', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 2, integral: 350},
        {goods_id: 4, id: 2, title: '积分商品标题测试55，居家日用', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 5, integral: 150},
        {goods_id: 5, id: 1, title: '积分商品标题测试66，生活服务', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 0, integral: 120},
        {goods_id: 6, id: 3, title: '积分商品标题测试77，花草绿植', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 3, integral: 1000},
        {goods_id: 7, id: 4, title: '积分商品标题测试88，生活电器', goods_image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1974728075,625919050&fm=26&gp=0.jpg', price: 4, integral: 630},
      ],
    }
  },
  methods: {
    // 标签页点击选择
    handleClick(tab) {
      this.pageList(Number(tab.index));
    },
    // 导航组件列表封装，订单状态切换栏
    pageList(index) {
      var _this = this;
      let arr = [];
      let arr2 = [];
      _this.pageObj.currentPage = 1;  // 分页第一页
      
      if(index != 0) {
        for (let i = 0; i < _this.orderList.length; i++) {
          // for (let k = 0; k < _this.orderList[i].length; k++) {
            if(_this.orderList[i][0].status == index-1) {
              arr.push(_this.orderList[i]);
            }
          // }
        }
      } else {
        _this.orderStatusList = JSON.parse(JSON.stringify(_this.orderList));
        arr = _this.orderList;
      }
      // 判断分页的每页显示数量是否大于，总的订单列表数量，要是不大于，就不显示分页，直接显示订单数据
      if(arr.length > _this.pageObj.pageSize) {
        // 大于每页显示数量，显示分页，取每页显示多少条数据
        for (let i = 0; i < _this.pageObj.pageSize; i++) {
          arr2.push(arr[i])
          _this.dataList = arr2;
        }
        _this.pageObj.totals = arr.length;  // 赋值分页总数量
        _this.orderStatusList = JSON.parse(JSON.stringify(arr));  // 赋值订单状态列表
        _this.pagingBool = true; //显示分页
        
      } else {
        _this.dataList = arr; // 少于每页显示数量，直接显示
        _this.pageObj.totals = 0;   // 分页总数清零
        _this.pagingBool = false; //不显示分页
      }
    },
  },
  created () {
    
  }
}
</script>

<style lang='less' scoped>
.content {
  padding: 15px;
}
.orderTitle {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 20px;
  h2 {
    margin: 30px 0px;
    color: #757575;
  }
  .orderText {
    font-size: 18px;
    height: 35px;
    .buttonGroup {
      float: right;
      button {
        background-color: white;
        font-size: 14px;
        color: #888;
        border: 1px solid #ccc;
        padding: 4px 25px;
        margin-left: 15px;
      }
      .payment_button {
        background-color: rgb(255, 118, 26) !important;
        color: white !important;
      }
      button:hover {
        background-color: #777;
        border-color: #777;
        color: white;
      }
    }
  }
}
.orderStatus {
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
  margin-bottom: 30px;
  line-height: 100px;
  .ul_li_table {
    color: #444;
    // width: 80%;
    max-width: 100%;
    text-align: left;
    tr {
      line-height: 70px;
      .detail_Text {
          margin-left: 30px;
          max-width: 320px;
          display: inline-block;
          vertical-align: middle;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          a {
            color: #444;
            text-decoration: none;
          }
      }
      // td {
      //   padding: 5px;
      // }
      td:nth-child(2) {
        text-align: left;
        width: 400px;
      }
    }
    .detail_Img {
      height: 64px;
      width: 64px;
      display: inline-block;
      img {
          height: auto;
          width: auto;
      }
    }
  }
  
}
.receivingInformation {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  margin-bottom: 30px;
  table {
    tr {
      td {
        height: 30px;
      }
      td:first-child  {
        text-align:justify; 
        text-justify:distribute-all-lines; 
        text-align-last:justify;
      }
      td:last-child  {
        text-indent: 10px;
        color: #757575;
      }
    }
    
  }
}
// .remarks {
//   border-bottom: 1px solid #ddd;
//   padding-bottom: 30px;
//   margin-bottom: 30px;
//   p {
//     min-height: 23px;
//     font-size: 14px;
//     color: #757575;
//   }
// }
.orderAmount {
  height: 150px;
  .floatR {
    float: right;
    table {
      tr {
        td {
          text-align: right;
          height: 30px;
          span {
            font-size: 32px;
          }
          
        }
        td:last-child  {
          text-indent: 5px;
          color: rgb(255, 118, 26);
        }
      }
      tr:last-child {
        vertical-align: text-bottom;
        td {
          padding-top: 20px;
        }
      }
    }
    
  }
}
.integral {
  display: inline-block;
}
i {
  font-style: normal;
}
</style>